import React from 'react'
import { Button, Input, Image } from 'antd';
import { API } from '../../config'
import { useState } from 'react'
import { updateProduct, deleteProduct } from '../../helper/cart'

export default function CartItem({ product, setCart }) {
	const [count, setCount] = useState(product.count)
	const onChange = (e) => {
		const count= parseInt(e.target.value)
		setCount(count)
		// 更新父组件的中产品的数量
		setCart(updateProduct(product._id, count))
	}
	const delProduct = () => {
		if(window.confirm('确认删除吗?')){
			setCart(deleteProduct(product._id))
		}
	}
	return (
			<tr className="ant-table-row">
				<td className="ant-table-cell">
					<Image
      			width={150}
      			src={`${API}/product/photo/${product._id}`}
    			/>
				</td>
				<td className="ant-table-cell">{product.name}</td>
				<td className="ant-table-cell">{product.price}</td>
				<td className="ant-table-cell">{product.category.name}</td>
				<td className="ant-table-cell">
					<Input type="number" min={1} onChange={onChange} value={count} />
				</td>
				<td className="ant-table-cell">
					<Button type="primary" danger onClick={delProduct}>删除</Button>
				</td>
			</tr>
		)
}
